<template>
  <div class="step1">
    step1
    <p>{{ msg1 }}</p>
    <div class="center-form">
      <el-form ref="numberValidateForm" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          :rules="[
            { required: true, message: '年龄不能为空'},
            { type: 'number', message: '年龄必须为数字值'}
          ]"
          label="年龄"
          prop="age"
        >
          <el-input v-model.number="numberValidateForm.age" type="age"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="180px">
        <div class="addForm_left">
          <el-form-item label="客户名称" prop="clientName">
            <el-input v-model="addForm.clientName" placeholder="请输入客户名称" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="客户类型" prop="clientType">
            <el-select v-model="value" placeholder="请选择" style="width: 150px">
              <el-option
                v-for="item in addForm.clientType"
                :key="item.value"
                :value="item.value"
                :label="item.label"/>
            </el-select>
          </el-form-item>
        </div>
        <el-form ref="organizationInfo" :model="addForm.organizationInfo" label-width="180px">
          <div class="addForm_left">
            <el-form-item label="企业名称/政府机构" prop="companyName">
              <el-input v-model="addForm.organizationInfo.companyName" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="负责人" prop="principal">
              <el-input v-model="addForm.organizationInfo.principal" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="负责人身份证号" prop="personCharge">
              <el-input v-model="addForm.organizationInfo.personCharge" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="addForm.organizationInfo.address" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="网址" prop="url">
              <el-input v-model="addForm.organizationInfo.url" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="组织规模" prop="organizationSize">
              <el-input v-model="addForm.organizationInfo.organizationSize" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="组织固定电话" prop="organizationPhone">
              <el-input v-model="addForm.organizationInfo.organizationPhone" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form ref="photo" :model="addForm.organizationInfo.photo" label-width="180px">
              <el-card :body-style="{ padding: '0px' }">
                <div class="setting-image">
                  <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess1"
                    :before-upload="beforeAvatarUpload"
                    :headers="headers"
                    action="http://youjp.tes:8080/crm/upload"
                    class="avatar-uploader images">
                    <img v-if="businessPhoto" :src="businessPhoto" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                  </el-upload>
                  <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess2"
                    :before-upload="beforeAvatarUpload"
                    :headers="headers"
                    action="http://youjp.tes:8080/crm/upload"
                    class="avatar-uploader images">
                    <img v-if="photoTop" :src="photoTop" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                  </el-upload>
                  <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess3"
                    :before-upload="beforeAvatarUpload"
                    :headers="headers"
                    action="http://youjp.tes:8080/crm/upload"
                    class="avatar-uploader images">
                    <img v-if="photoBottom" :src="photoBottom" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                  </el-upload>
                </div>
              </el-card>
            </el-form>
            <el-form ref="bank" :model="addForm.organizationInfo.bank" label-width="180px">
              <el-form-item label="开户银行" prop="bankAcc">
                <el-input v-model="addForm.organizationInfo.bank.bankAcc" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="银行账号" prop="bankAccount">
                <el-input v-model="addForm.organizationInfo.bank.bankAccount" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="税号" prop="taxNumber">
                <el-input v-model="addForm.organizationInfo.bank.taxNumber" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </el-form>
            <el-form ref="businessInfo" :model="addForm.organizationInfo.businessInfo" label-width="180px">
              <el-form-item label="法人姓名" prop="legalName">
                <el-input v-model="addForm.organizationInfo.businessInfo.legalName" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="统一信用代码" prop="unifiedCode">
                <el-input v-model="addForm.organizationInfo.businessInfo.unifiedCode" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="公司类型" prop="companyType">
                <el-input v-model="addForm.organizationInfo.businessInfo.companyType" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="公司地址" prop="companyAddree">
                <el-input v-model="addForm.organizationInfo.businessInfo.companyAddree" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="注册资本" prop="regisCapital">
                <el-input v-model="addForm.organizationInfo.businessInfo.regisCapital" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="成立日期" prop="estabDate">
                <el-date-picker v-model="addForm.organizationInfo.businessInfo.estabDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"/>
              </el-form-item>
              <el-form-item label="营业期限" prop="operatingPeriod">
                <el-input v-model="addForm.organizationInfo.businessInfo.operatingPeriod" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="经营范围" prop="businessScope">
                <el-input v-model="addForm.organizationInfo.businessInfo.businessScope" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </el-form>
            <el-form ref="contactInfo" :model="addForm.contactInfo" label-width="180px">
              <el-form-item label="职位" prop="position">
                <el-select v-model="value" placeholder="请选择" style="width: 150px">
                  <el-option
                    v-for="item in addForm.contactInfo.position"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"/>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人姓名" prop="username">
                <el-input v-model="addForm.contactInfo.username" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="联系电话" prop="phoneNumber">
                <el-input v-model="addForm.contactInfo.phoneNumber" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="微信号" prop="weChat">
                <el-input v-model="addForm.contactInfo.weChat" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="QQ号" prop="qq">
                <el-input v-model="addForm.contactInfo.qq" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="addForm.contactInfo.email" placeholder="选择日期"/>
              </el-form-item>
            </el-form>
          </div>
        </el-form>
        <el-form-item label="客户简介" prop="customerProfile">
          <el-input :rows="4" v-model="addForm.customerProfile" type="textarea" placeholder="请输入客户简介" />
        </el-form-item>
      </el-form> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import store from '@/store'
import { getToken } from '@/utils/auth'
import { isvalidatePhoneNumber, isvalidateEmail } from '@/utils/validate'
export default {
  name: 'Step1',
  props: ['msg'],
  data() {
    // 手机号
    const validatePhoneNumber = (rule, value, callback) => {
      if (!isvalidatePhoneNumber(value)) {
        callback(new Error('手机号总共要十一位且第一位必须以1开头，且第二位是3、4、5、7、8中的任意一个'))
      } else if (value === '') {
        callback(new Error('请输入你的手机号'))
      } else {
        callback()
      }
    }
    // 电子邮箱
    const validateEmail = (rule, value, callback) => {
      if (!isvalidateEmail(value)) {
        callback(new Error('邮箱域名只能是以163.com、qq.com、42du.cn结尾'))
      } else if (value === '') {
        callback(new Error('请输入你的电子邮箱'))
      } else {
        callback()
      }
    }
    return {
      msg1: '111',
      numberValidateForm: {
        age: ''
      },
      active: 0,
      value: '',
      // 新增界面数据
      addForm: {
        clientName: '',
        clientType: [{
          value: 'personal',
          label: '个人'
        }, {
          value: 'company',
          label: '企业'
        }, {
          value: 'government',
          label: '政府'
        }],
        organizationInfo: {
          companyName: '',
          principal: '',
          personCharge: '',
          address: '',
          url: '',
          organizationSize: '',
          businessInfo: {
            legalName: '',
            unifiedCode: '',
            companyType: '',
            companyAddree: '',
            regisCapital: '',
            estabDate: '',
            operatingPeriod: '',
            businessScope: ''
          },
          bank: {
            bankAcc: '',
            bankAccount: '',
            taxNumber: ''
          },
          organizationPhone: '',
          photo: {
            businessPhoto: null,
            photoTop: null,
            photoBottom: null
          }
        },
        contactInfo: {
          position: [{
            value: 'legalPerson',
            label: '法人'
          }, {
            value: 'manager',
            label: '经理'
          }, {
            value: 'director',
            label: '局长'
          }],
          username: '',
          phoneNumber: '',
          weChat: '',
          qq: '',
          email: '',
          primaryId: '',
          groupContacts: ''
        },
        customerProfile: ''
      },
      addFormRules: {
        phoneNumber: [{ required: true, trigger: 'blur', validator: validatePhoneNumber }],
        email: [{ required: true, trigger: 'blur', validator: validateEmail }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'businessPhoto',
      'photoTop',
      'photoBottom'
    ]),
    headers() {
      return {
        token: getToken()
      }
    }
  },
  methods: {
    // handleAvatarSuccess1(res, file) {
    //   store.dispatch('GetInfo').then(res => this.businessPhoto)
    // },
    // handleAvatarSuccess2(res, file) {
    //   store.dispatch('GetInfo').then(res => this.photoTop)
    // },
    // handleAvatarSuccess3(res, file) {
    //   store.dispatch('GetInfo').then(res => this.photoBottom)
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 设置可上传图片大小及类型
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('Avatar picture must be JPG or PNG format!')
      }
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return (isJPG || isPNG) && isLt2M
    }
  }
}
</script>

<style scoped lang="scss">

.main {
  width: 100%;
  height: 100%;
  background-color: white
}

.container{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  padding-top: 80px;
  .steps {
    width: 96%;
    margin: 0 2% 0 2%
  }
  .center-form {
    width: 100%;
    height: 100%;
    margin-top: 80px
  }
  .step-btn {
    bottom: 0px;
    text-align: center
  }
}
.addForm_left {
  width: 100%;
  .el-form-item {
    width: 70%
  }
}
.setting-image {
  width: 100%;
  margin: 10px;
  display: inline-flex
}
.avatar-uploader, .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 30%;
  height: 100%;
}
.avatar-uploader, .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 30%;
  height: 100%;
  line-height: 100%;
  text-align: center;
}
.avatar {
  width: 30%;
  height: 100%;
  z-index: 99999;
}

</style>
